<template>
<div>
    <!-- 欢迎 -->
    <el-row :gutter="10">
        <el-col :span="24">
            <el-alert title="欢迎使用昊商易通cms管理系统" type="success" :closable="false"></el-alert>
        </el-col>
    </el-row>
    <br>
    <!-- 基本数据 -->
    <el-row :gutter="10">
        <el-col :span="6">
            <div class="block">
                <div class="l">
                    <el-avatar :size="100" :src="squareUrl" shape="square"></el-avatar>
                </div>
                <div class="r">
                    <h3>我要参观</h3>
                    <h2>0</h2>
                </div>
            </div>
        </el-col>
        <el-col :span="6">
            <div class="block">
                <div class="l">
                    <el-avatar :size="100" :src="squareUrl" shape="square"></el-avatar>
                </div>
                <div class="r">
                    <h3>我要参展（最近7日）</h3>
                    <h2>0</h2>
                </div>
            </div>
        </el-col>
        <el-col :span="6">
            <div class="block">
                <div class="l">
                    <el-avatar :size="100" :src="squareUrl" shape="square"></el-avatar>
                </div>
                <div class="r">
                    <h3>活动报名（最近7日）</h3>
                    <h2>0</h2>
                </div>
            </div>
        </el-col>
        <el-col :span="6">
            <div class="block">
                <div class="l">
                    <el-avatar :size="100" :src="squareUrl" shape="square"></el-avatar>
                </div>
                <div class="r">
                    <h3>用户注册（最近7日）</h3>
                    <h2>0</h2>
                </div>
            </div>
        </el-col>
    </el-row>
    <br>
    <!-- 访问统计 -->
    <el-row :gutter="10">
        <el-col :span="24">
            <TopBarBlock t='访问统计' color='gray'>
                <template slot='content'>
                    <Analyze></Analyze>
                </template>
            </TopBarBlock>
        </el-col>
    </el-row>
    <!-- 您的资料和浏览器统计 -->
    <el-row :gutter="10" style="margin-top:20px">
        <!-- 登录资料 -->
        <el-col :span="12">
            <TopBarBlock t="您的资料" color="green">
                <template slot='content'>
                    <Info></Info>
                </template>
            </TopBarBlock>
        </el-col>
        <!-- 浏览器统计 -->
        <el-col :span="12">
            <TopBarBlock t='浏览器统计' color='#3c8dbc'>
                <template slot='content'>
                    <BrowserAnalyze></BrowserAnalyze>
                </template>
            </TopBarBlock>
        </el-col>
    </el-row>
</div>
</template>

<script>
import TopBarBlock from '@/components/topBarBlock'
import Analyze from './analyze'
import BrowserAnalyze from './browser'
import Info from './info'
export default {
    components: {
        Analyze,
        BrowserAnalyze,
        TopBarBlock,
        Info,
    },
    data() {
        return {
            squareUrl: "https://cube.elemecdn.com/9/c2/f0ee8a3c7c9638a54940382568c9dpng.png",
        }
    },

}
</script>

<style lang="less" scoped>
// 基本信息
.block {
    display: flex;
    background-color: #fff;
    height: 100px;

    .l {
        margin-right: 10px;
    }

    .r {
        padding: 10px;
    }
}

</style>
